<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ImageEditor.aspx.cs" Inherits="AS.ImagePicker.ImageEditor" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Copping Image</title>
    <link href="jquery.Jcrop.css" rel="stylesheet" type="text/css" />
    <script src="jquery-1.3.2.js" type="text/javascript"></script>
    <script src="jquery.Jcrop.js" type="text/javascript"></script>
    <link href="dialog.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div style="text-align:center;width:100%;">
    <img id="img_crop" src="<%=Url %>" />
    
    <div style="padding-top:10px;padding-bottom:10px;">
        Width&nbsp;&nbsp;<input type="text" id="CW" style="width:50px" />&nbsp;&nbsp;
        Height&nbsp;&nbsp;<input type="text" id="CH" style="width:50px" />&nbsp;&nbsp;
        <input class="formbutton" type="button" value="   OK  " onclick="window.opener.Refresh_onclose('<%=Url %>');window.self.close();" id="Button1" />
        &nbsp;&nbsp;&nbsp;
        <asp:Button ID="btnCrop" CssClass="formbutton" runat="server"
                        OnClientClick="return confirm('Are you sure to crop this image ?')"
                        Text="Crop Image" OnClick="btnCrop_Click" />
        &nbsp;&nbsp;&nbsp;
        <input class="formbutton" type="button" value="   Cancel  " onclick="window.self.close();" id="Button2" />
    </div>
    </div>
    
    <asp:HiddenField ID="X" runat="server" />

    <asp:HiddenField ID="Y" runat="server" />

    <asp:HiddenField ID="W" runat="server" />

    <asp:HiddenField ID="H" runat="server" />
    </form>
</body>
</html>
<script type="text/javascript">
	$(window).load(function(){
	    set_crop();
	});
    function set_crop(){
		var imgObj = document.getElementById("img_crop");
            
        if(<%=ResizeMode%> == 0){
	        if(imgObj.width><%=ImageWidth%>||imgObj.height><%=ImageHeight%>){
		        $('#img_crop').Jcrop({
			        onSelect: updateCoords,
			        allowSelect: false,
			        allowResize: <%=Resizable%>,
			        setSelect: [ 0, 0, <%=ImageWidth%>, <%=ImageHeight%> ],
			        aspectRatio: <%=ImageWidth%>/<%=ImageHeight%>
		        });
		        $('#X').val(0);
    	        $('#Y').val(0);
    	        $('#W').val(<%=ImageWidth%>);
    	        $('#H').val(<%=ImageHeight%>);
    	        $('#CW').val(<%=ImageWidth%>);
    	        $('#CH').val(<%=ImageHeight%>);
		    }
		}
		if(<%=ResizeMode%> == 2){
	        if(imgObj.width><%=ImageWidth%>){
		        $('#img_crop').Jcrop({
			        onSelect: updateCoords,
			        allowSelect: true,
			        allowResize: true,
			        setSelect: [ 0, 0, <%=ImageWidth%>, <%=ImageWidth%> ],
			        aspectRatio: 0
		        });
		        $('#X').val(0);
    	        $('#Y').val(0);
    	        $('#W').val(<%=ImageWidth%>);
    	        $('#H').val(<%=ImageWidth%>);
    	        $('#CW').val(<%=ImageWidth%>);
    	        $('#CH').val(<%=ImageWidth%>);
		    }
		}
		if(<%=ResizeMode%> == 3){
	        if(imgObj.height><%=ImageHeight%>){
		        $('#img_crop').Jcrop({
			        onSelect: updateCoords,
			        allowSelect: true,
			        allowResize: true,
			        setSelect: [ 0, 0, <%=ImageHeight%>, <%=ImageHeight%> ],
			        aspectRatio: 0
		        });
		        $('#X').val(0);
    	        $('#Y').val(0);
    	        $('#W').val(<%=ImageHeight%>);
    	        $('#H').val(<%=ImageHeight%>);
    	        $('#CW').val(<%=ImageHeight%>);
    	        $('#CH').val(<%=ImageHeight%>);
		    }
		}
		if(<%=ResizeMode%> == 4){
	        if(imgObj.width><%=ImageWidth%>||imgObj.height><%=ImageHeight%>){
		        $('#img_crop').Jcrop({
			        onSelect: updateCoords,
			        allowSelect: true,
			        allowResize: true,
			        setSelect: [ 0, 0, <%=ImageWidth%>, <%=ImageHeight%> ],
			        aspectRatio: 0
		        });
		        $('#X').val(0);
    	        $('#Y').val(0);
    	        $('#W').val(<%=ImageWidth%>);
    	        $('#H').val(<%=ImageHeight%>);
    	        $('#CW').val(<%=ImageWidth%>);
    	        $('#CH').val(<%=ImageHeight%>);
		    }
		}
		if(<%=ResizeMode%> == 1){
	        $('#img_crop').Jcrop({
		        onSelect: updateCoords,
		        allowSelect: true,
		        allowResize: true,
		        aspectRatio: 0
	        });
	        $('#CW').val(0);
    	    $('#CH').val(0);
		}
	}

    function updateCoords(c)
    {
	    $('#X').val(c.x);
    	$('#Y').val(c.y);
    	$('#W').val(c.w);
    	$('#H').val(c.h);
    	$('#CW').val(c.w);
    	$('#CH').val(c.h);
    };
</script>
